<template>
  <div class="new-list g-mt20">
    <Card class="new-item-wrap" v-for="item in newList" :key="item.id">
      <div class="new-item">
        <img src="/static/images/dot.jpg" class="new-pic">
        <h3 class="new-title">A high quality UI Toolkit based on Vue.js</h3>
      </div>
    </Card>

    <Row class="loading-more">
      <i-col :span="24">
        <Button type="primary" :loading="loading" @click="loadingMore" ref="prolist">
          <span v-if="!loading">Click me!</span>
          <span v-else>Loading...</span>
        </Button>
      </i-col>
    </Row>

    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      newList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        loading: false
      }
    },
    methods: {
      loadingMore() {
        this.loading = true
        this.$emit('loadingmore')
      }
    },
    watch: {
      newList() {
        this.loading = false
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .loading-more
    lbposition(0, 14px)
    wh(100%, 32px)
    text-align: center
</style>